Step 1 - Interpolate the rotation of the compass dial

In this step of the tutorial you use a Property Target Interpolator to interpolate the rotation of the compass dial from the current direction to a target direction over time.

Assets for the tutorial

The starting point of this tutorial is the Interpolate.kzproj Kanzi Studio project file stored in the <KanziWorkspace>/Tutorials/Interpolate/Start/Tool_project directory.

The <KanziWorkspace>/Tutorials/Interpolate/Completed/Tool_project directory contains the completed Kanzi Studio project of this tutorial.

The starting point project contains the content you need to complete this tutorial:

Interpolate the rotation of the compass dial

In this section you animate the rotation of the compass dial so that when the direction of travel changes, the Property Target Interpolator interpolates the current value to the target value over time.

To interpolate the rotation of the compass dial:

  1. In the Library press Alt and right-click Property Types, select Property Type, and in the New Property Type window set:You create the Interpolate.Interpolator property type because you want to interpolate the Interpolate.Direction property whose data type is integer. To interpolate a property whose data type is not a float, you need to create a float property type and bind the property you want to interpolate to the float property you created.
  2. Bind the rotation of the Dial node to the property that you created in the previous step:
    1. In the Project select the Dial node, in the Properties in the Bindings click the existing binding to edit it, and in the Binding Argument Editor set the Expression to:
      CreateRotationZ({@./Interpolate.Interpolator})
      Click Save.
      You use this binding to rotate the Dial node based on the value of the Interpolate.Interpolator property.
    2. In the Properties click + Add Binding and in the Binding Argument Editor set:
      • Property to Interpolate.Interpolator
      • Expression to
        {#RootPage/Interpolate.Direction}
      Click Save.
      You bind the Interpolate.Interpolator property to the Interpolate.Direction property in the RootPage node with which you control the rotation.
  3. Add a Property Target Interpolator to the node the rotation of which you want to interpolate:
    1. In the Project select the Dial node, in the Node Components > Animation section click + Add Animation and select Property Target Interpolator.
      You use the Property Target Interpolator to interpolate the value of the Interpolate.Interpolator property to a target value over time. The bindings you created in the previous step apply this change to the rotation of the Dial node.
    2. In the Node Components > Animation section in the Property Target Interpolator set:
      • Interpolated Property Type to Interpolate.Interpolator
      • Acceleration to 5
      • Drag to 2
      The Property Target Interpolator emulates the behavior of a spring-damper system which never overshoots. You use the Acceleration property to set the force with which the spring moves the object, and the Drag property to set the damping coefficient. The larger the value of the Acceleration property is, the faster the property reaches its new value. The larger the value of the Drag property is, the lower is the maximum interpolation speed.

Now when you change the value of the direction XML element in the <ProjectName>/Application/bin/Compass.xml and save the file, the Property Target Interpolator interpolates the rotation of the compass dial to the target value over time.

TIP

By default the Preview updates content only when the Kanzi Studio window is focused. To see the changes in your Kanzi Studio project when the Kanzi Studio window is not focused, in Kanzi Studio select Edit > User Preferences and in the Advanced tab enable the Update Preview when Kanzi Studio is not focused.



< INTRODUCTION
NEXT STEP >

See also

Interpolating property values

Using bindings

Using triggers

Data sources

Using state managers